<%--
  Created by IntelliJ IDEA.
  User: 我的大名叫陆健伟
  Date: 2016/2/27
  Time: 9:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="privilege" uri="/WEB-INF/privilege.tld" %>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>修改绑定</title>
    <link rel="stylesheet" href="<c:url value='/resource/wechat/css/frozen.css'/>">
    <link rel="stylesheet" type="text/css" href="<c:url value='/resource/wechat/css/main.css'/>" />
    <script src="<c:url value='/resource/js/jquery-2.0.min.js'/>"></script>
    <script src="<c:url value='/resource/js/jquery.form.min.js'/>"></script>
    <script src="<c:url value='/resource/wechat/js/zepto.min.js'/>"></script>
    <script src="<c:url value='/resource/wechat/js/frozen.js'/>"></script>
</head>
<body class="body_bg" ontouchstart>
<section class="ui-container">
    <div class="ui-form-item ui-form-item-show ui-border-b bg_fff">
        <label for="#">原手机号：</label>
        <input type="text" placeholder="" readonly value="${mobile}" id="oldMobile" maxlength="11">
    </div>
    <%--<div class="ui-form-item ui-form-item-show ui-border-b bg_fff" style="position: relative;">
        <label for="#"><span class="text_white">验</span>验证码：</label>
        <input type="text" placeholder="原手机号验证码" id="oldCode" maxlength="6" value="">
        <button id="getOldCode" class="ui-btn" style="position: absolute; top: 8px; right: 10px;">
            获取验证码
        </button>
    </div>--%>
    <div class="ui-form-item ui-form-item-show ui-border-b bg_fff">
        <label for="#">新手机号：</label>
        <input type="text" placeholder="请输入新手机号" value="" id="newMobile" onkeypress="onlyNumber()" maxlength="11">
    </div>
    <div class="ui-form-item ui-form-item-show ui-border-b bg_fff" style="position: relative;">
        <label for="#"><span class="text_white">验</span>验证码：</label>
        <input type="text" placeholder="新手机号验证码" id="newCode" maxlength="6" value="">
        <button id="btnSendCode" class="ui-btn" style="position: absolute; top: 8px; right: 10px;">
            获取验证码
        </button>
    </div>
    <div class="ui-form-item ui-form-item-show ui-border-b bg_fff">
        <label for="#">身份证号：</label>
        <input type="text" placeholder="请输入身份证号" value="" id="id" maxlength="18">
    </div>
    <div class="ui-btn-wrap">
        <button class="ui-btn-lg ui-btn-primary" id="queren">
            确认修改
        </button>
    </div>
</section>

</body>

<script>

    function onlyNumber(){
        if ((event.keyCode <48) || (event.keyCode> 57 )) event.returnValue = false;
    }

    /*$("#getOldCode").click(function(){
        var phone = $("#oldMobile").val();
        if(phone.length != 11){
            alert("请输入正确的手机号码");
            return;
        }
        getSms(phone);
    });*/
    var secs = 120;
    $("#btnSendCode").click(function(){
        var phone = $("#newMobile").val();
        if(phone.length != 11){
            alert("请输入正确的手机号码");
            return;
        }
        getSms(phone);
        $("#btnSendCode").attr("disabled","true");


        for(var i=1;i<=secs;i++) {
            window.setTimeout("update(" + i + ")", i * 1000);
        }
    });

    function update(num) {
        if(num == secs) {
            $("#btnSendCode").text("发送验证码");
            $("#btnSendCode").removeAttr("disabled");
        }
        else {
            var printnr = secs-num;
            $("#btnSendCode").text(printnr +"秒失效");
        }
    }

    function getSms(phone){
        $.ajax({
            url : '<c:url value="/api/sms/send" />',
            type : 'post',
            dataType : 'json',
            data : {"tel":phone,"type":1,"content":"","expire":""},
            success : function(resp){
                if(resp&&resp.succ){
                    //alert(resp.msg);
                }else {
                    alert(resp.msg);
                }
            }
        });
    }

    $("#queren").click(function(){
        if(checkForm()){
            $.ajax({
                url : "<c:url value='/api/profile/mobile/rebind?'/>" + "id=" + $("#id").val() + "&oldTel=" + $("#oldMobile").val() + "&newTel=" + $("#newMobile").val() + "&newCode=" + $("#newCode").val(),
                type : "post",
                dataType : "json",
                success : function(resp){
                    if(resp&&resp.succ){
                        //成功之后跳到个人中心页面，现在还不存在
                        alert(resp.msg);
                        $("#queren").remove();
                    }else {
                        alert(resp.msg);
                    }
                }
            });
        }
    });

    function checkForm(){
        /*if($("#oldCode").val()==""){
            alert("请输入原手机号验证码！");
            return false;
        }*/
        if($("#newMobile").val() == "" && $("#newMobile").val().length != 11){
            alert("请输入正确的11位新手机号");
            return false;
        }
        if($("#newMobile").val() == $("#oldMobile").val()){
            alert("新手机号不得与原手机号相同");
            return false;
        }
        if($("#newCode").val()==""){
            alert("请输入新手机号验证码！");
            return false;
        }
        if($("#id").val().length!=18&&$("#id").val().length!=15){
            alert("请输入正确的身份证号码！");
            return false;
        }
        return true;
    }


</script>

</html>
